<template>
  <section class="book-select-box" v-loading="isLoading">
    <el-row>
      <el-input v-model="params.key" prefix-icon="el-icon-search" placeholder="搜索关键词" @keyup.enter.native="onSearch"></el-input>
    </el-row>
    <el-row>
      <el-tabs class="sub-category-list" v-model="params.categoryId" @tab-click="onTabClick">
        <el-tab-pane  label="全部" name="" ></el-tab-pane>
        <el-tab-pane :label="classify.name" :name="classify.bookCategoryId+''" v-for="(classify,cIndex) in classifyList" :key="cIndex">{{classify.name}}</el-tab-pane>
      </el-tabs>
        <el-table :data="resp.bookList" :show-header="false" class="book-table" style="width: 100%">
          <el-table-column  align="center">
            <template slot-scope="scope">
              <el-radio name="selectBook" v-model="selectBookId" :label="scope.row.id" @change="onSelectRadio(scope.row)">
              	<img :src="scope.row.cover" class="book-img" />
              	 <p class="book-tit">{{scope.row.title}}</p>
              	<p class="book-price">{{handleMoney(scope.row.price,2,true)}}</p>
              </el-radio>
            </template>
          </el-table-column>
        </el-table>
      <el-pagination class="page-box" @current-change="handleCurrentChange"
        :current-page="params.page.page" :page-size="params.page.pageSize"
        layout=" prev, pager, next,total"
        :total="resp.total" v-if="resp.total>0">
      </el-pagination>
    </el-row>
    <el-row class="foot-btns">
      <el-button @click="onCancel"> 取 消 </el-button>
      <el-button type="primary" @click="onSubmit" v-loading="isLoading"> 保 存 </el-button>
    </el-row>
  </section>
</template>

<script>
  import { fmMoney } from "../../../utils";
  import { getBookList} from "../../../api/book";
  import {getTemplateClassifyList} from "../../../api/publish";

  export default {
    name:"SelectBook",
    props:{
      isBanner:{
        type:Number,
        default:null
      },
      categoryId:{
        type:Number,
        default:null
      },
      templateId:{
        type:String,
        default:null
      }
    },
    data(){
      return{
        params:{
          key:null,
          categoryId:null,
          isDraft:0,
          statusList:[1],
          isBanner:null,
          page: {page: 1, pageSize: 5},
          sort: {order: null, sort: null}
        },
        isLoading:false,
        resp:{
          bookList:[],
          total:0
        },
        selectBookId:null,
        selectBook:null,
        classifyList:[],
      }
    },
    methods:{
      onSearch(){
        this.loadBook();
      },
      onTabClick(tab){
        //console.log(tab);
        //this.params.categoryId = tab.name;
        this.loadBook();
      },
      onSelectRadio(row){
        //console.log("radio",row)
        this.selectBook = row;
      },
      handleCurrentChange(val){
        this.params.page.page = val;
        this.loadBook();
      },
      handleMoney(money){
        return fmMoney(money,2,true)
      },
      onCancel(){
        this.$emit("save",null);
      },
      onSubmit(){
        this.isLoading = true;
        if(this.selectBook == null){
          this.isLoading = false;
          this.$alert("请选择一本书","提示");
          return;
        }
        this.$emit("save",this.selectBook);
        this.isLoading = false;
      },
      async loadBook(){
        console.log("loadBook",this.params)
        let params = this.baseUtil.modelCopy(this.params);
        if(params.categoryId == '0') params.categoryId = null;
        this.isLoading = true;
        let resp = await getBookList(params);
        console.log("books==>",resp)
        if(this.qUtil.validResp(resp)){
          this.resp.bookList = resp.data.dataList;
          this.resp.total = resp.data.total;
        }else this.$message({ message: resp.msg, type: 'warning' });
        this.isLoading = false;
      },
      async loadBookCategory(){
        this.classifyList = [];
        let resp = await getTemplateClassifyList({templateId:this.templateId});
        if(this.qUtil.validResp(resp)){
          this.classifyList = resp.data.classifyList;
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
    },
    mounted(){
      if(this.isBanner != null) this.params.isBanner = this.isBanner;
      if(this.categoryId != null) this.params.categoryId = this.categoryId+'';
      this.loadBookCategory();
      this.loadBook();
    }
  }
</script>

<style>
  .sub-category-list{
    margin-top:15px;
    height:40px;
    background-color:rgba(244,249,248,1);
    padding:0 10px;
  }
  .page-box{ text-align: right}
  .foot-btns{
    margin-top:30px;
    text-align: center;
  }
  .book-table .el-radio{
  	width: 100%;
  	text-align: left;
  }
  .book-table .el-radio__input{
  	float: left;
  	margin-top: 30px;
  }
  .book-table .el-radio__label{
  	height: auto;
  	overflow: hidden;
  	display: block;
  	margin-left:20px;
  }
  .book-table .book-img{
    width:52px;
    height:76px;
    padding:1px;
    float: left;
    border:1px solid #f2f2f2;
    margin-right: 10px;
  }
  .book-table .book-tit,.book-table .book-price{
    margin:0;
    padding: 0;
    line-height: normal;
    font-size:14px;
  }
  .book-table .book-tit{
    color:#2C2B2A;
    font-weight:bolder;
    padding-bottom:7px;
  }
  .book-table .book-price{
    color:#EB5A64;
    padding-bottom:15px;
  }
</style>
